<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 浏览器的兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口 -->
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <!-- Cache-Control头域 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <!-- 设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 -->
    <meta http-equiv="Pragma" content="no-cache"/>
    <!-- 禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。 -->
    <meta content="telephone=no" name="format-detection"/>
    <!-- 删除默认的苹果工具栏和菜单栏 -->
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <!-- 控制状态栏显示样式 -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <style>
        .msg{
            width: 100px;
            word-wrap: break-word;
            /* height: 100px; */
            border:5px solid #ff0;
            border-radius: 16px;
            position: relative;
            padding: 8px;
            background: #333;
            color: pink;
        }
        .msg::before{
            content: '';
            width: 0;
            height: 0;
            border: 20px solid;
            position: absolute;
            bottom: -41px;
            left: 40px;
            border-color:  gold transparent transparent;
        }
        .msg::after{
            content: '';
            width: 0;
            height: 0;
            border: 20px solid;
            position: absolute;
            bottom: -35px;
            left: 40px;
            border-color:  #333 transparent transparent;
        }
        .warn-left {
            width: 10px;
            height: 100%;
            background-color: red;
        }
        .warn-top {
            width: 100%;
            height: 10px;
            background-color: red;
        }
        .warn-right {
            width: 10px;
            height: 100%;
            background-color: red;
        }
    </style>
    <title>phaser3.rpg</title>
</head>

<body>
    <div id="games-root"></div>
    <div id="games-input" style="opacity: 0;">
        <div style="display: flex;">
            <input id="input" style="width: 100%; height: 100%;" type="text">
            <button id="btn" style="background: rgb(30, 192, 30); font-weight: bold;">说</button>
        </div>
    </div>
    <div id="msg" class="msg" style="opacity: 0;"></div>
    <div id="text"></div>
    <div id="warn-left" class="warn-left" style="opacity: 0;"></div>
    <div id="warn-top" class="warn-top" style="opacity: 0;"></div>
    <div id="warn-right" class="warn-right" style="opacity: 0;"></div>

    <script>
        console.log('这只是一个模板')

        setTimeout(() => {
            document.documentElement.scrollTop = 0;
            console.log(document.documentElement.scrollTop);
        },2000);
        
        document.documentElement.style.overflowY = 'hidden';
        document.documentElement.style.overflowX = 'hidden';
        document.getElementById('games-input').ontouchmove = function (e) {
            e.preventDefault();
        };
        document.getElementById('msg').ontouchmove = function (e) {
            e.preventDefault();
        };
        document.getElementById('text').ontouchmove = function (e) {
            e.preventDefault();
        };
        document.getElementById('warn-left').ontouchmove = function (e) {
            e.preventDefault();
        };
        document.getElementById('warn-top').ontouchmove = function (e) {
            e.preventDefault();
        };
        document.getElementById('warn-right').ontouchmove = function (e) {
            e.preventDefault();
        };
    </script>

    <script>
        (function () {
            window.speak = function (_callback) {
                document.getElementById('btn').onclick = () => {
                    if (document.getElementById('input').value) {
                        document.getElementById('msg').innerHTML = document.getElementById('input').value;
                        _callback(document.getElementById('input').value);
                        document.getElementById('input').value = '';
                    }
                }
            }
        })();
    </script>

    <script type="text/javascript" src="http://localhost:3001/phaser/dist/SpinePlugin.js"></script>
    <script defer src="http://localhost:3001/phaser/dist/runtime.js"></script>
    <script defer src="http://localhost:3001/phaser/dist/vendor.js"></script>
    <script defer src="http://localhost:3001/phaser/dist/index.js"></script>
</body>

</html>